<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="text" name="" id="" class="input1" v-model = "title">
	<input type="text" name="" id="" class="input1" v-model = "title">
	<input type="text" name="" id="" class="input1" v-model = "content">
	<h3 v-model = "title">我是h3</h3>
	<div v-model = "content" >我是content</div>
	<h1 v-model = "content" >我是content</h1>
	
</body>
<script>
	function View() {
		// 创建代理作为数据仓库
		const proxy = new Proxy({},{
			get(obj,key){
				return obj[value]
			},
			set(obj,key,value){
				obj[key] = value;
				var els =document.querySelectorAll(`[v-model=${key}]`)
				els.forEach(item =>{
					item.value=value
					item.innerHTML=value
				})
				// console.log(value,els)
				return true
			}
		})

		// 创建一个方法
		this.init = function(){
			let els = document.querySelectorAll("[v-model]")
			els.forEach(item =>{
				item.addEventListener("input",function(){
					var value = this.value;
					proxy[item.getAttribute("v-model")]=value;
					// console.log(value,item.getAttribute("v-model"),proxy)
				})
			})
			console.log(els)

		}	

	}
	var view = new View()
	view.init()

	
	




</script>				
</html>